<%--
  Created by IntelliJ IDEA.
  User: 杨飞龙
  Date: 2020/5/31
  Time: 0:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
    <base href="<%=basePath%>">

    <link rel="stylesheet" type="text/css" href="lib/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="lib/z-tree/css/zTreeStyle/zTreeStyle.css">


    <%--js--%>
    <script type="text/javascript" src="lib/easyui/jquery.min.js">
    </script>
    <script type="text/javascript" src="lib/easyui/jquery.easyui.min.js">
    </script>
    <script type="text/javascript" src="lib/z-tree/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="lib/easyui/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="lib/jquery.serializejson/jquery.serializejson.min.js"></script>
</head>
<body>

<%--添加角色--%>
<div id="addRoleWindow" class="easyui-window" title="添加角色" style="width:60%;height:500px"
     data-options="modal:true,closed:true">

    <div class="easyui-layout" fit="true">
        <div data-options="region:'west'" class="easyui-panel" title="请输入要操作的角色信息" style="width:50%;text-align: center">
            <form id="roleForm" method="post">
                <input id="rid" type="hidden" name="rid">
                <div style="padding: 10px 50px">
                    <input  class="easyui-textbox" prompt="请输入角色名称"
                            data-options="label:'角色名称：'"
                            style="width:100%;height:30px;padding:10px" name="rname">
                </div>
                <div style="padding: 10px 50px">
                    <input  class="easyui-textbox" prompt="请输入角色描述"
                            data-options="label:'角色描述：'"
                            style="width:100%;height:30px;padding:10px" name="rdesc">
                </div>

                <div style="padding: 15px 50px;text-align: center">
                    <a onclick="insertRole()" href="javascript:void(0)" class="easyui-linkbutton">提交</a>
                </div>

            </form>

        </div>
        <div class="easyui-panel" title="角色菜单管理" data-options="region:'center'"
             style="width:50%;padding:5px;background:#eee;">
            <ul id="menutree" class="ztree"></ul>
        </div>

    </div>

</div>

<%--linkenbutton--%>
<div id="tt" style="padding:5px 0;">
    <a id="roleAdd"  href="javascript:void(0)" class="easyui-linkbutton"data-options="iconCls:'icon-add'">新增角色</a>
    <a id="delRole" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除角色</a>
    <a id="editRole" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">更新角色</a>
</div>

<table id="dataTabs" style="height:500px"></table>

<%--zTree--%>
<script type="text/javascript">

    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "mid",
                pIdKey: "pid"
            },
            key: {
                name: "mname",
                url: "xxx"
            }
        },
        //异步加载用户菜单
        async: {
            enable: true,
            url: "menu/allList.do" ,
            dataFilter: ajaxDataFilter

        },
        check: {
            enable: true,
            chkStyle: "checkbox"
        }

    };

    //预处理
    function ajaxDataFilter(treeId, parentNode, responseData) {
        if (responseData) {
            for(var i =0; i < responseData.length; i++) {
                responseData[i].open=true;
            }
        }
        return responseData;
    };

    //获取选择的节点

    $(document).ready(function () {
        $.fn.zTree.init($("#menutree"), setting);
    });

</script>


<script type="text/javascript">


    $(function () {
        $('#dataTabs').datagrid({
            url: 'role/list.do',
            fit: true,
            fitColumns: true,
            pagination: true,//分页条
            checkOnSelect: false,
            striped: true,
            toolbar: '#tt',//顶部工具栏
            header: '#tb',
            columns: [[
                {field: '', checkbox: true},
                {field: 'rid', title: '角色编号'},
                {field: 'rname', title: '角色名称', width: 100},
                {field: 'rdesc', title: '角色描述', width: 100}
            ]]
        });
    })
</script>


<script type="text/javascript">

    /*添加角色 --start*/
    $("#roleAdd").click(function () {
        $("#addRoleWindow").window({
            closed: false
        })
    })

    function insertRole() {
        //获取勾选的节点
        var treeObj = $.fn.zTree.getZTreeObj("menutree");
        var nodes = treeObj.getCheckedNodes(true);

       var mids=[]

        if (nodes.length == 0){
            $.messager.alert("温馨提示","至少分配一个菜单","info")
            return false
        }

        $.each(nodes,function (index) {
            mids.push(nodes[index].mid)
        })

        $("#roleForm").form('submit', {
            url:'role/saveOrUpdate.do',
            queryParams:{mids:mids.toString()},
            onSubmit: function () {
                var flag = $('#roleForm').form('validate');
                return flag;
            },
            success: function (data) {
                if (data) {
                    $('#addRoleWindow').window({
                        closed: true
                    });
                    //清除表单
                    $("#roleForm").form('reset');
                    $.fn.zTree.init($("#menutree"), setting);
                    //刷新页面
                    $("#dataTabs").datagrid('reload');
                    $.messager.alert('温馨提示', '操作角色成功', 'info')
                } else {
                    $('#addRoleWindow').window({
                        closed: true
                    });
                    //清除表单
                    $("#roleForm").form('reset');
                    $.fn.zTree.init($("#menutree"), setting);
                    //刷新页面
                    $("#dataTabs").datagrid('reload');
                    $.messager.alert('温馨提示', '操作角色失败', 'info')
                }
            }
        });
    }
    /*添加账号 --end*/

    /*编辑账号 --start*/
    $("#editRole").click(function () {
        var check= $("#dataTabs").datagrid('getChecked');

        if (check.length == 0) {
            $.messager.alert("编辑角色","至少选择一条数据","info")
            return false
        }else if( check.length > 1){
            $.messager.alert("编辑角色","一次只能操作一条数据","info")
            $("#dataTabs").datagrid('clearChecked');
            return false

        }

        var role=check[0]

        $("#addRoleWindow").window({
            closed:false
        })

        //设置id
        $("#rid").val(role.rid)
        //回显数据
        $('#roleForm').form('load',role);


        var treeObj = $.fn.zTree.getZTreeObj("menutree");
        $.get("role/getRoleMenu.do?rid="+role.rid,function (data) {
            $.each(data,function (index,mid) {
                var node = treeObj.getNodeByParam("mid", mid, null);

                treeObj.checkNode(node, true, false);
            })
        })

    })

    /*编辑账号 --end*/

    /*删除账号 -- start*/
    $("#delRole").click(function () {
        //获取选择的id
        var check = $("#dataTabs").datagrid("getChecked");

        if (check.length == 0) {
            $.messager.alert("删除角色", "至少选择一条数据", "info")
            return false
        }

        var rids = []

        $.each(check, function (index, role) {
            rids.push(role.rid)
        })

        $.messager.confirm('删除角色', '你确定要删除选中的角色吗?', function(r){
            if (r){
                $.get("role/deleteCompnay.do?rids=" + rids, function (data) {
                    if (data){
                        $("#dataTabs").datagrid('reload');
                        $.messager.alert('删除角色', '删除成功', 'info')
                    }else {
                        $("#dataTabs").datagrid('reload');
                        $.messager.alert('删除角色', '删除失败', 'info')
                    }
                })
            }
        });

    })
    /*删除账号 -- end*/

</script>
</body>
</html>
